//样式重置库
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,body{
  width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
}

ul, li {
  list-style: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

//PC
@media (min-width: 1200px){

 html,body{

   .container{
     width: 100%;
     height: 100%;
     max-width: 1200px;
     //background-color: silver;
     .header{
       .pc-top{
         img{
           max-height: 300px;
         }
         .mobile-top{
           display: none;
         }
       }
     }
   }
 }


}
@media (min-width: 790px) and (max-width: 1119px) {
  html,body{
  .container{
    width: 100%;
    height: 100%;
    //background-color: red;

    .login{

      .login-form{

        .submit{
          width: 90%;
          height: 4.5rem;
          font-size: 1rem;
          //line-height: 2rem;
        }
      }
    }
  }
  }

}

@media (min-width: 549px) and (max-width: 789px){
  html,body{

    .container{
      width: 100%;
      height: 100%;
      //background-color: green;
      .header{

        .pc-top{
          display: none;
        }
        .mobile-top{
        //background-color: slateblue;
          display: block;
        }
      }
      .login{

        .login-form{

          .submit{
            width: 90%;
            height: 4.5rem;
            font-size: 1rem;
            //line-height: 2rem;
          }
        }
      }
    }
  }
}

@media (max-width: 548px) {
  html,body{

    .container{
      width: 100%;
      height: 100%;
      //background-color: orange;
      .header{

        .pc-top{
          display: none;
        }
        .mobile-top{
          //background-color: slateblue;
          display: block;
        }
      }

      .login{

        .login-form{

          .submit{
            width: 90%;
            height: 5rem;
            font-size: 1rem;
          }
        }
      }
    }
  }
}

html,body{
  .container{
  position: relative;
  margin: 0 auto;
  padding: 0;
   .header{
   width: 100%;
   //height: 100%;
    .pc-top{
     background-image: url("../images/logonbanner.png");
     background-size: cover;
     background-position: 0 0 ;
      width: 100%;
     .img{
       position: relative;
       //width: 100%;
       width: 40%;
       text-align: center;
       img{
         height:4rem;
         border-radius: 50%;
         border: none;
         outline: none;
         //display: block;
         margin: 30px 0px 20px  0px ;
         //margin-bottom: 20px;
       }
       p{
         //background-color: slateblue;
         width:auto ;
         font-size: 1.3rem;
         margin: 0 auto;
         color: #f9f9f9;
         text-align: center;
         line-height: 1.3rem;
        }
        padding-bottom: 30px;
     }

    }
    .mobile-top{
     width: 100%;
     margin: 0 ;
     padding: 0;
     img{
       width: 100%;
       height: auto;
     }
    }

   }
    .mobile-top{
      display: none;
    }
    input:hover{
     cursor: pointer;
    }
    .login{
      text-align: center;
      width: 100%;
      position: relative;
      //background-color: royalblue;
      height: auto;
      margin: 0 auto 20px auto;
      .login-form{
       text-align: center;
       padding: 20px;
       .input:nth-child(1){
         border-bottom: 1px rgba(208, 208, 208, 0.78) solid;
         border-top: 2px rgba(208, 208, 208, 0.78) solid;
       }
        .input:nth-child(2){
          border-top: 1px rgba(208, 208, 208, 0.78) solid;
          border-bottom: 2px rgba(208, 208, 208, 0.78) solid;
        }
      .input{
       padding: 10px 0px;
       background-color: white;
       border-left: 2px rgba(208, 208, 208, 0.78) solid;
        border-right: 2px rgba(208, 208, 208, 0.78) solid;
       text-align: left;
       display: flex;
       justify-content: flex-start;
       justify-items: flex-start;
       overflow: hidden;
       margin: 0 auto;
       text-indent: 1rem;
        input{
        list-style: none;
        justify-self: flex-start;
        text-decoration: none;
        overflow: hidden;
          font-size: 1.1rem;
         width: 60%;
         margin: 0px  ;
         border: 0;
         box-shadow: none;
         outline: none;
         line-height: 2rem;
         height:2rem;
         text-indent: 1em;
         //background-color: wheat;
        }
        span{
        width: 2rem;
        height: 2rem;
        box-shadow: none;
        border: 0;
        text-indent: 1rem;
        padding: 0;
        color: silver;
        line-height: 2rem;
        font-size: 1.5rem;
        outline: none;
        //background-color: red;
        }
        button{
          font-size: 1rem;
        }
      }
      .cbox{
         //background-color: salmon;
         width: 100%;
         height: 2rem;
         line-height: 2rem;
         display: flex;
         justify-content: center;
         justify-items: center;
         margin: 0;
         padding: 0;
        .checkbox{
          display: inline-block;
          line-height: 2rem;
          height: 2rem;
          margin: 0 auto  ;
          //background-color: yellow;
           white-space: nowrap;
          input{
            width: 0.8rem;
            margin: 0 ;
            height: 0.8rem;
            padding: 0;
            vertical-align: middle;
            box-sizing: border-box;
            border:2px #6d92d8 solid;
          }
          span{
             padding: 0 10px;
           line-height: 2rem;
           //background-color: salmon;
           color: #bdbdbd;
           vertical-align: middle;
           font-size: 1rem;
          }

        }

      }
      .submit{
         width: 90%;
         height: 3rem;
         font-size: 1rem;
        padding: 0;
        margin: 20px auto;
        background-color: #6d92d8;
         line-height: 3rem;
         outline: none;
         box-shadow: none;
      }
        .submit:hover{
          list-style: none;
          box-shadow: none;
        }



      }
    }
    .info{
    position: relative;
     width:90%;
     margin: 0 auto;
     //background-color: rebeccapurple;
      h3{
        color: #aaaaaa;
        font-size: 1.5rem;
       }
       p{
        color: silver;
       }
    }

    .footer{
      bottom: 0;
      margin-bottom: 0;
      position: absolute;
      vertical-align: center;
      //background-color: slateblue;
      width: 100%;
     .copy-right{

       p{
       text-align: center;
         color: #bdbdbd;
        line-height:0.3;
        font-size: 0.5rem;
       }
     }
    }
   //background-color: #6d92d8;




  }
}

